<template>
    <div>
        <div v-if="visible">
            <fieldset>
            <legend>信息列表</legend>
            <h1>列表展示</h1>
            <button @click="visible=false">退出登录</button>
            <button @click="usersmsg">点击展示信息列表</button>
            <ul>
                <li v-for="item of arr" :key="item.id">
                    {{item.name}}
                    <button v-auth:delete="permission">删除</button>
                    <button v-auth:add='permission'>增加</button>
                    <button v-auth:edit="permission">修改</button>
                    <button v-auth:read="permission">查看</button>
                    
                </li>
            </ul>
        </fieldset>
        </div>

    <div v-else>
        <fieldset>
        <legend>登录页面</legend>
        <h1>请登录</h1>
        <label>账号:</label>
        <input type="text" id="username" v-model="username">
        <br>
        <label for="">密码:</label>
        <input type="text" id="password" v-model="password">
        <button @click="login">登录</button>
    </fieldset>
    </div>

    </div>

</template>
<script>
// Vue.directive('auth',{
//     inserted(el,binding){
//         console.log(el,binding);
//     }
// })

const getid =((params={})=>{
    return fetch('http://chst.vip/users/login',{
        method:'post',
        headers:{
            'content-type':'application/json'
        },
        body:JSON.stringify(params)
    })
    .then(body=>body.json())
    .catch(err=>err.toString())
})
const getmsg =()=>{
    return fetch('http://chst.vip/students/getstulist?count=5',{
        headers:{
                'authorization':sessionStorage.getItem('usermsg')
            }
    })
    .then(body=>body.json())
    .catch(err=>err.toString())
}
    export default{
        data () {
            return {
                visible:false,
                password:'',
                username:'',
                arr:[],
                permission:[]
            }
        },
        methods:{
            async login(){
            let res = await getid({username:this.username,password:this.password})
                
                    if(res.state){
                        console.log(res);
                        this.visible=true
                        sessionStorage.setItem('usermsg',res.token)
                        this.permission=res.permission.buttons
                    }
                
            },
            async usersmsg(){
              let res= await getmsg()
                    this.arr=res.data
                    console.log(res);
            }
        },

        directives: {
            auth:{
                inserted(el,binding){
                console.log(el,binding);
                let ppp = binding.arg;
                let ooo = binding.value
                console.log(ppp,ooo);
                let uuu =ooo.includes(ppp)
                if(!uuu){
                    // el.disabled=true
                    el.parentElement.removeChild(el)
                }
             }
            }
        }
    }
</script>



